import { Image, View } from "@tarojs/components";
import styles from "./index.scss";
import Taro, { useDidShow } from "@tarojs/taro";
import Card from "@/components/Card";
import { useMemo, useState } from "react";
import { Add } from "@nutui/icons-react-taro";
import SearchBar from "@/components/SearchBar";
import Tag from "@/components/Tag";
import { Menu } from "@nutui/nutui-react-taro";
import { useRequest } from "taro-hooks";
import { getMaterialList, getMaterialTypeList } from "@/services/Material";
import { useFamilyStore } from "@/model";
import { getZoneList } from "@/services/MaterialZone";
import { getImgUrl } from "@/utils";
import Empty from "@/components/Empty";

export default () => {
  const { family } = useFamilyStore();
  const [searchParams, setSearchParams] = useState({
    familyId: family?.id,
  });
  const { data: zoneList } = useRequest(getZoneList, {
    defaultParams: [family?.id],
  });
  const { data: typeList } = useRequest(getMaterialTypeList);
  const { data: list, run: refresh } = useRequest(
    () => getMaterialList(searchParams),
    {
      refreshDeps: [searchParams],
    }
  );
  const changeSearchParams = (v) => {
    setSearchParams({
      ...searchParams,
      ...v,
    });
  };
  useDidShow(() => {
    refresh();
  });
  const zoneOptions = useMemo(() => {
    const arr = zoneList?.map?.((i) => ({ text: i.name, value: i.id }));
    return [{ text: "全部", value: void 0 }, ...(arr || [])];
  }, [zoneList]);
  const typeOptions = useMemo(() => {
    const arr = typeList?.map?.((i) => ({ text: i.name, value: i.id }));
    return [{ text: "全部", value: void 0 }, ...(arr || [])];
  }, [typeList]);
  return (
    <View className={styles.container}>
      <View>
        <SearchBar
          onSearch={(v) => {
            changeSearchParams({
              name: v,
            });
          }}
          right={
            <Add
              onClick={() =>
                Taro.navigateTo({
                  url: "/innerPages/material/add/index",
                })
              }
            />
          }
        />
        <Menu style={{ backgroundColor: "#fff" }}>
          <Menu.Item
            title="分区"
            options={zoneOptions}
            value={searchParams?.zoneId}
            onChange={(v) => {
              changeSearchParams({ zoneId: v.value });
            }}
          />
          <Menu.Item
            title="分类"
            options={typeOptions}
            value={searchParams?.materialClassificationId}
            onChange={(v) => {
              changeSearchParams({
                materialClassificationId: v.value,
              });
            }}
          />
        </Menu>
      </View>
      {
        !!list?.list?.length ?<View className={styles.list}>
        {list?.list?.map?.((item) => {
          return (
            <Card
              key={item.id}
              onClick={() => {
                Taro.navigateTo({
                  url: "/innerPages/material/detail/index?id=" + item.id,
                });
              }}
            >
              <View className={styles.card}>
                <Image src={getImgUrl(item.imgUrl)} className={styles.icon} />
                <View className={styles.right}>
                  <View className={styles.rightTop}>
                    <View className={styles.name}>{item.name}</View>
                    <Tag type="info">
                      {" "}
                      {
                        typeList?.find?.(
                          (i) => i.id === item.materialClassificationId
                        )?.name
                      }
                    </Tag>
                  </View>
                  <View className={styles.rightBottom}>
                    <View>
                      {
                        zoneList?.find?.((i) => i.id === item.materialZoneId)
                          ?.name
                      }
                    </View>
                    <View>{item.createdTime}</View>
                  </View>
                </View>
              </View>
            </Card>
          );
        })}
      </View>:<Empty />
      }
      
    </View>
  );
};
